<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" size="full" :close-on-press-escape="false"
               :close-on-click-modal="false" :before-close="off" :show-close="true" :top="dialog_margin_top">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
        <el-form :inline="true">
          <el-col :span="16">
            <div class="grid-content bg-purple-dark"></div>
            <el-form-item lable="险种代码" label-width="150px" :span="3">
              <el-input v-model="formData.riskcode" size="small" placeholder="险种代码"></el-input>
            </el-form-item>
            <el-form-item lable="险种名称" label-width="150px" :span="3">
              <el-input v-model="formData.riskcname" size="small" placeholder="险种名称"></el-input>
            </el-form-item>
            <el-form-item lable="是否有效" label-width="150px" :span="3">
              <el-select v-model="formData.validstatus" placeholder="是否有效" disabled size="small">
                <el-option v-for="item in validOptions" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="reset()">
                <i class="fa fa-undo"></i>
                重置
              </el-button>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
                        <el-form-item label="短期费率方式" required>
                              <el-select v-model="formData.shortratetype" placeholder="选择" size="small">
                                            <el-option v-for="item in shortRateOptions" :key="item.shortratetype" :label="item.shortratetype" :value="item.shortratetype"></el-option>
                                        </el-select>
                          </el-form-item>

                    </el-col> -->
          <!-- <el-form-item>
                        <el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="info" @click="">
                            <i class="fa fa-search-plus"></i>
                            查看日志
                        </el-button>
                    </el-form-item> -->
        </el-form>
      </el-col>

      <el-table :data="tableData" ref="multipleTable" v-loading="loading" element-loading-text="处理中......" border
                style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected"
                @row-click="toggleRow">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="riskcode" label="险种代码" width="160"></el-table-column>
        <el-table-column prop="riskcname" label="险种中文名称" show-overflow-tooltip min-width="240"></el-table-column>
        <el-table-column prop="riskename" label="险种英文名称" show-overflow-tooltip min-width="240"></el-table-column>
        <el-table-column prop="salestartdate" label="生效日期" width="150" :formatter="dateFormater"></el-table-column>
        <el-table-column prop="saleenddate" label="失效日期" width="150" :formatter="dateFormater"></el-table-column>
        <el-table-column prop="validstatus" label="是否有效" width="120" :formatter="validFormater"></el-table-column>
      </el-table>

      <div class="block" style="float:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="formData.currentPage"
                       :page-sizes="[15, 30, 45]"
                       :page-size="formData.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
			<span slot="footer" class="dialog-footer">
				<el-row type="flex" :span="24" justify="space-around">
          <el-col :span="18">
            <el-table :data="risks" border style="width: 100%;text-align:left;" :highlight-current-row="true">
              <el-table-column prop="riskcode" label="险种代码" width="120"></el-table-column>
              <el-table-column prop="riskcname" label="险种名称" show-overflow-tooltip min-width="180"></el-table-column>
              <el-table-column prop="ownerriskcode" label="归属险种代码" min-width="120">
                <template scope="props">
                  <span style="color : red" v-if="props.row.riskcode !== '2724'">*</span>
                  <input v-if="props.row.riskcode !== '2724'" :id="props.row.riskcode" class="ownerriskcode" size="small"
                         @click="openOwnerRiskDialog(props.row)" readonly></input>
                </template>
              </el-table-column>
              <el-table-column prop="ownerflag" label="归属类型" min-width="120">
                <template scope="props">
                  <span style="color : red" v-if="props.row.riskcode === '2724'">*</span>
                  <input v-if="props.row.riskcode === '2724'" :id="'ownerflag'+props.row.riskcode" class="ownerflag" size="small"
                         @click="openOwnerFlagDialog(props.row)" readonly></input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
				<br>
				<div align="center">
          <el-button @click="off">取 消</el-button>
          <el-button type="warning" @click="confirm" :disabled="isSelectNull">关联</el-button>
        </div>
		  	</span>
    </el-dialog>

    <RiskAdd v-if="showAddDialog"></RiskAdd>
    <OwnerRiskCodeSelect v-if="showOwnerRiskSelect"></OwnerRiskCodeSelect>
    <OwnerFlagSelect v-if="showOwnerFlagSelect"></OwnerFlagSelect>
  </div>

</template>

<script>
  import RiskAPI from "../../../../js/production/risk/riskAPI"
  import dateUtil from "../../../../common/js/dateUtil"
  import RiskAdd from "./RiskAdd"
  import Utils from"../../../../js/production/utils";
  import OwnerRiskCodeSelect from"./OwnerRiskCodeSelect";
  import OwnerFlagSelect from"./OwnerFlagSelect";
  export default {
    components: {
      RiskAdd,
      OwnerRiskCodeSelect,
      OwnerFlagSelect,
    },
    data () {
      return {
        formData: {
          currentPage: 1,
          pageSize: 15,
          riskcode: '',
          riskcname: '',
          validstatus: '1',
          kind: {},
          selectedRows: [],
          shortratetype: '',
        },
        tableData: [],
        total: 0,
        riskOptions: [],
        shortRateOptions: [],
        validOptions: [{
          label: '1-有效',
          value: '1'
        }, {
          label: '0-无效',
          value: '0'
        }],
        title: '',
        isSortRequest: false,	//是否请求
        showAddDialog: false,
        showOwnerRiskSelect: false,
        showOwnerFlagSelect: false,
        tableHeight: 0,
        dialogVisible: true,
        dialog_margin_top: '1%',
        isSelectNull: true,
        loading: false,
        risks: [],
        currentRiskCode: '',
        tempId: '',
        tempRiskCode: '',
        tempOwnerFlagId: '',
        tempOwnerFlag: '',
      }
    },
    mounted() {
      this.tableHeight = Utils.getScreenHeight() * 0.6;
      this.formData.kind = this.$parent.selectedRows[0];
      this.title = '【条款-' + this.formData.kind.kindcode + '-' + this.formData.kind.kindcname + '】可关联险种如下';
      this.queryData();
      RiskAPI.initShortRate(this);
      let vm = this;
      document.onkeydown = function (e) {
        if (e.keyCode == 13) {
          vm.queryData();
        }
      }
      setInterval(function () {
        for (let i = 0; i < vm.risks.length; i++) {
          if (vm.tempId === vm.risks[i].riskcode) {
            $('#' + vm.tempId).val(vm.tempRiskCode);
            vm.risks[i].ownerriskcode = vm.tempRiskCode;
          }
        }
        vm.tempId = '';
        vm.tempRiskCode = '';
        for (let i = 0; i < vm.risks.length; i++) {
          if (vm.tempOwnerFlagId === 'ownerflag'+vm.risks[i].riskcode) {
            $('#' + vm.tempOwnerFlagId).val(vm.tempOwnerFlag);
            vm.risks[i].ownerflag = vm.tempOwnerFlag;
          }
        }
        vm.tempOwnerFlagId = '';
        vm.tempOwnerFlag = '';
      }, 500);
    },
    computed: {
      selectedRows() {
        return this.formData.selectedRows;
      }
    },
    watch: {
      selectedRows(curVal, oldVal) {
        if (curVal.length < 1) {
          this.isSelectNull = true;
        } else {
          this.isSelectNull = false;
        }
        this.risks = [];
        for (let i = 0; i < curVal.length; i++) {
          if (curVal[i].compositeflag == '1' || curVal[i].riskcode === '2724') {
            // curVal[i].ownerriskcode = null;
            this.risks.push(curVal[i]);
          }
        }
        $('.ownerriskcode').val('');
        $('.ownerflag').val('');
      },
    },
    methods: {
      queryData() {
        RiskAPI.queryByClassAndComposite(this);
      },
      confirm() {
        let vm = this;
        let isLink = true;
        //组合险归属险种不能为空
        $('.ownerriskcode').each(function () {
          if ($(this).val() == '') {
            vm.$message({type: 'error', message: '归属险种代码不能为空！'});
            isLink = false;
            return false;
          }
        });
        //组合险归属险种不能为空
        $('.ownerflag').each(function () {
          if ($(this).val() == '') {
            vm.$message({type: 'error', message: '2724归属类型不能为空！'});
            isLink = false;
            return false;
          }
        });
        if (isLink) {
          RiskAPI.linkRisk(vm);
        }
      },
      openAddDialog() {
        RiskAPI.openAddDialog(this);
      },
      openOwnerRiskDialog(row) {
        this.currentRiskCode = row.riskcode;
        this.showOwnerRiskSelect = true;
      },
      openOwnerFlagDialog(row) {
        this.currentRiskCode = row.riskcode;
        this.showOwnerFlagSelect = true;
      },
      rowSelected(rows) {
        this.formData.selectedRows = rows;
      },
      toggleRow(row) {
        this.$refs.multipleTable.toggleRowSelection(row);
      },
      handleSizeChange(val) {
        this.formData.pageSize = val;
        this.queryData();
      },
      handleCurrentChange(val) {
        this.formData.currentPage = val;
        this.queryData();
      },
      dateFormater(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return dateUtil.getDateyMd(date);
      },
      validFormater(row, column) {
        var valid = row[column.property];
        if (valid == undefined) {
          return "";
        }
        if (valid == 1) {
          return "有效";
        }
        if (valid == 0) {
          return "无效";
        }
      },
      reset() {
        this.formData.riskcode = '';
        this.formData.riskcname = '';
        this.formData.validstatus = '';
        this.formData.currentPage = 1;
        this.queryData();
      },
      off() {
        this.$parent.showRiskConfigDialog = false;
      }
    }
  }
</script>
